<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">
    <title>全国人口普查条例知识竞答</title>

    <link rel="stylesheet" href="http://censusqiniu.getpv.com/css/style.css">

    <style>
        .top_bg {
            height: 93px;
            background: url(http://censusqiniu.getpv.com/images/wenda_tit.jpg) center top no-repeat;
            background-size: cover;
            position: relative;
        }

        .wizhongjiang {
            padding: 20px;
            margin-top: 10px;
        }

        .zhongjiang {
            padding: 20px;
            margin-top: 10px;
            display: flex;
            flex-flow: column nowrap;
            align-items: center;
            justify-content: center;
        }

        .zhongjiang .address {
            width: 100%;
            height: 340px;
            background: url(http://censusqiniu.getpv.com/images/address_bg.jpg) center center no-repeat;
            background-size: contain;
            margin-top: 30px;
        }

        .form-box {
            display: flex;
            flex-flow: column nowrap;
            justify-content: center;
            align-items: flex-start;
            height: 340px;
            padding-top: 20px;
            box-sizing: border-box;
        }

        .form-box .tit {
            margin-left: 60px;
            color: #d53a03;
        }

        .form-box .form-item {
            margin-top: 10px;
            margin-left: 40px;
        }

        .form-box .form-item input,
        .form-box .form-item textarea {
            padding: 5px;
            width: 150px;
        }

        .form-box .btns {
            text-align: center;
            width: 100%;
            margin-top: 20px;
        }

        .form-box .btns a {
            display: inline-block;
            width: 115px;
            height: 40px;
        }

        .wizhongjiang,
        .zhongjiang {
            display: none;
        }

        .modal-box {
            align-items: flex-start;
            background-color: rgba(0, 0, 0, .9);
        }

        .share-img {
            width: 80vw;
            margin-top: 10%;
        }

        .share-box {
            visibility: hidden;
        }
    </style>
</head>

<body>
 

    <div class="box" id="app">
        <div class="top_bg"></div>

        <!-- 未中奖 -->
        <div class="wizhongjiang" :style="{display:is_zhongj === 'w' ? 'block' : 'none'}"><img
                src="http://censusqiniu.getpv.com/images/wzhongjiang_img.jpg?v=1.01" alt=""></div>

        <!-- 中奖了，提交联系方式 -->
        <div class="zhongjiang" :style="{display:is_zhongj === 'z' ? 'block' : 'none'}">
            <div class="tit"><img src="http://censusqiniu.getpv.com/images/zhongjiang_tit.jpg?v=1.01" alt=""></div>
            <div class="address">
                <form action="" method="POST" class="form-box">
                    <h4 class="tit">请填写详细联系方式</h4>
                    <div class="form-item"><input type="text" placeholder="中奖者姓名" v-model="fdata.name"></div>
                    <div class="form-item"><input type="text" placeholder="手机" v-model="fdata.mobile"></div>
                    <div class="form-item"><textarea cols="25" rows="3" placeholder="收货地址"
                            v-model="fdata.address"></textarea></div>
                    <div class="btns"><a href="javascript:;" @click="lingjiang"><img src="http://censusqiniu.getpv.com/images/zj_tijiao.jpg"
                                alt=""></a></div>
                </form>
            </div>
        </div>

        <!-- 分享 -->
        <div class="modal-box share-box" :style="{visibility:share ? 'visible' : 'hidden'}">
            <div class="share-img">
                <img src="http://censusqiniu.getpv.com/images/share-img.png" alt="">
            </div>
        </div>
    </div>

    <script src="http://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="layer_mobile/layer.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"
        integrity="sha256-NSuqgY2hCZJUN6hDMFfdxvkexI7+iLxXQbL540RQ/c4=" crossorigin="anonymous"></script>
    <script>
        $(function () {
            // code

            //如果是直接分享了这个地址，进来后跳转到首页             
            let reffer = document.referrer
            if(!reffer){
                location.href="/?v="+Math.random()
            }

        })

        function getQuery(name) {
            // 正则：[找寻'&' + 'url参数名字' = '值' + '&']（'&'可以不存在）
            let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            let r = window.location.search.substr(1).match(reg);
            console.log(r);
            if (r != null) {
                // 对参数值进行解码
                return decodeURIComponent(r[2]);
            }
            return null;
        }

        // 抽奖
        function quer() {
            $('#daan-con').show()
        }

        // VUE
        var vue = new Vue({
            el: '#app',
            data: function () {
                return {
                    res: {},
                    choujiang_ma: '',
                    is_zhongj: '',
                    fdata: {
                        mobile: '',
                        phone: '',
                        address: ''
                    },
                    share: false
                }
            },
            created: function () {
                let _self = this
                // $.ajax({
                //     type: "get",
                //     url: 'http://census.getpv.com/api/index/choujiang',
                //     success: function (res) {
                //         console.log("===>", res)
                //         if (res.hasOwnProperty('choujiang_ma')) {
                //             _self.choujiang_ma = res.choujiang_ma
                //             _self.is_zhongj = 'z'
                //             layer.open({
                //                 content: res.msg,
                //                 btn: '确定'
                //             })
                //             return
                //         } else {
                //             _self.is_zhongj = 'w'
                //         }
                //     }
                // })

                var choujiang_ma = getQuery('choujiang_ma')
                if (!!choujiang_ma) {
                    _self.choujiang_ma = choujiang_ma
                    _self.is_zhongj = 'z'
                } else {
                    _self.is_zhongj = 'w'
                }

                _self.fdata.phone = getQuery('phone')

                setTimeout(function () {
                    if (_self.is_zhongj === 'w') {
                        _self.openShare()
                    }
                }, 3000)
            },
            methods: {
                openShare: function () {
                    this.share = true
                },
                closeWindow: function () {
                    try {
                        document.addEventListener('WeixinJSBridgeReady', function () { WeixinJSBridge.call('closeWindow'); }, false)
                        WeixinJSBridge.call('closeWindow')
                        window.location.href = "about:blank"
                        window.close()
                    } catch (error) {

                    }
                },
                lingjiang: function () {
                    var _self = this
                    // 领奖
                    var _data = this.fdata
                    _data.choujiang_ma = _self.choujiang_ma

                    $.ajax({
                        type: "post",
                        url: 'http://census.getpv.com/api/index/linjiang',
                        data: _data,
                        success: function (res) {

                         if (res.code == -2) {
                                    //手机号格式不正确
                                    let index=layer.open({
                                        content: res.msg,
                                        btn: '确定',
                                        yes: function () {
                                            layer.close(index);
                                        } 
                                    })
                            } else{
                                layer.open({
                                    content: res.msg,
                                    btn: '确定',
                                    yes: function () {
                                        layer.closeAll();
                                        // _self.closeWindow()
                                        _self.openShare()
                                    }
                                })
                            } 
                           
                        }
                    })
                }
            }
        })
    </script>



<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

<script>
    $(function(){
        $.ajax({
        url: 'http://census.getpv.com/api/wechat/shareSign',
        type: 'POST',
        async: true,
        data: {url: location.href.split('#')[0]},
        dataType: 'json',
        cache: false,
        success: function (data) {
            wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: data['appid'], // 必填，公众号的唯一标识
            timestamp: data['timestamp'], // 必填，生成签名的时间戳
            nonceStr: data['noncestr'], // 必填，生成签名的随机串
            signature: data['signature'],// 必填，签名
            jsApiList: ['checkJsApi', 'updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone'] // 必填，需要使用的JS接口列表
            });
        
        
            wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
        
                wx.checkJsApi({
                    jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareAppMessage', 'onMenuShareTimeline', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
                    success: function (res) {
                    // 以键值对的形式返回，可用的api值true，不可用为false
                    // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
                    // alert(JSON.stringify(res));
                    }
                });
            
            
            
            
            
                //自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）
                // wx.updateAppMessageShareData({ 
                //   title:  data.title, // 分享标题
                //   desc:  data.desc, // 分享描述
                //   link:  data.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                //   imgUrl:  data.imgUrl, // 分享图标
                //   success: function () {
                //     // 设置成功
                //   }
                // })
            
                let shareData={
                    title:data.title,
                    desc:data.desc,
                    link:data.link,
                    imgUrl:data.imgUrl,
                }
            
                wx.updateAppMessageShareData(shareData, function (res) {
            //这里是回调函数
                });
            
                wx.updateTimelineShareData(shareData, function (res) {
            //这里是回调函数
                });
            
                wx.onMenuShareAppMessage(shareData, function (res) {
            //这里是回调函数
                });
            
                wx.onMenuShareTimeline(shareData, function (res) {
            //这里是回调函数
                });
                wx.onMenuShareQQ(shareData, function (res) {
            //这里是回调函数
                });
                wx.onMenuShareWeibo(shareData, function (res) {
            //这里是回调函数
                });
                wx.onMenuShareQZone(shareData, function (res) {
            //这里是回调函数
                });
        
        
        
        
            });
        
        }
        });
        
    
    })
    
    </script>
</body>

</html>